<template>
  <div>
    <!-- 头部区域 -->
    <Header></Header>
    <!-- 头部区域 -->
    <!-- 表单区域 -->
    <div class="udlite-container partners">
        <van-cell-group>
            <van-field v-model="username" label="用户名:" placeholder="请输入用户名"></van-field>
            <van-field v-model="password1" label="密码:" placeholder="请输入密码"></van-field>
            <van-field v-model="password2" label="密码:" placeholder="请再次输入密码"></van-field>
            <van-field v-model="gender" label="性别:" placeholder="请输入性别"></van-field>
            <van-field v-model="phone" label="手机号" placeholder="请输入手机号"></van-field>
            <van-field v-model="email" label="邮箱" placeholder="请输入邮箱"></van-field>
            <van-button type="primary" @click="register">注 册</van-button>
            <van-button type="info" @click="empty">重 置</van-button>
        </van-cell-group>
    </div>
    <!-- 表单区域 -->
    <!-- 尾部区域 -->
    <Footer></Footer>
    <!-- 尾部区域 -->
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
export default {
    components:{
        'Header':Header,
        'Footer':Footer
    },
    data(){
        return{
            username:'',
            password1:'',
            password2:'',
            gender:'',
            phone:'',
            email:'',
        }
    },
    methods:{
        register(){
            if(this.username == ''){
                this.$toast('用户名不能为空')
                return false
            }
            if(this.password1 == ''){
                this.$toast('密码不能为空')
                return false
            }
            if(this.password1 != this.password2){
                this.$toast('两次密码不一致')
                return false
            }
            if(this.gender == ''){
                this.$toast('性别不能为空')
                return false
            }
            if(this.phone == ''){
                this.$toast('手机号不能为空')
                return false
            }
            if(this.email == ''){
                this.$toast('邮箱不能为空')
                return false
            }
            else{
                let data = new FormData
                data.append('username',this.username)
                data.append('password',this.password1)
                data.append('phone',this.phone),
                data.append('gender',this.gender)
                data.append('email',this.email)
                this.axios.post('http://127.0.0.1:8000/register',data).then(resp=>{
                    console.log(resp.data)
                })
            }
        },
        empty(){
            this.username == '',
            this.password1 == '',
            this.password2 == '',
            this.phone == '',
            this.gender == '',
            this.email == ''
        }
    }
};
</script>

<style>
</style>